<template>
	<view class="main-box">
		<view class="top-box">
			<view class="name">当前已审余额</view>
			<view class="value">{{userInfo.cash_money}}</view>
			<view class="btn" @click="$u.route('/pages/users/withdrawal')">提现</view>
			<view class="main-li">
				<view class="li">
					<view class="span">累计已审余额</view>
					<view class="text">{{userInfo.balance}}</view>
				</view>
				<view class="li" style="padding-left: 60rpx;">
					<view class="span">提现中</view>
					<view class="text">{{userInfo.freeze_money}}</view>
				</view>
				<view class="li" style="padding-left: 60rpx;">
					<view class="span">累计提现</view>
					<view class="text">{{userInfo.use_cash_money}}</view>
				</view>
			</view>
		</view>
		<view class="img-box">
			<image :src="videoInfo.image"  @click="videoShow = true"></image>
			<!-- <image src="/static/images/23.png"  class="btn"></image> -->
		</view>
		<view class="tab-box">
			<view class="li" :class="tabValue==0?'main':''" @click="setTabValue(0)">红包记录</view>
			<view class="li" :class="tabValue==1?'main':''" @click="setTabValue(1)">提现记录</view>
		</view>
		<view class="list-box" v-if="dataList.length">
			<block v-for="(item,index) in dataList" :key="index">
				<view class="list one" v-if="tabValue ==0">
					<view class="pro-img" v-if="item.goods">
						<image :src="item.goods.data_image" mode="widthFix"></image>
					</view>
					<view class="name line1"  v-if="item.goods">
						物品名称:<text style="margin-left:10rpx">{{item.goods.name}}</text>
					</view>
					<view class="name line1"  v-if="item.goods">
						红包类型:<text style="margin-left:10rpx">{{item.type == 1?'配料表解析':'营养成分表解析'}}</text>
					</view>
					<view class="name line1">
						获得现金红包奖励
						<text class="text one" v-if="item.cash_status == 1">已审核</text>
						<text class="text" v-if="item.cash_status == 0">待审核</text>
						<text class="text two" v-if="item.cash_status == -1">照片不合格</text>
					</view>
					<view class="time">{{getNowDate(item.create_at)}}</view>
					<view class="value">{{item.amount}}</view>
				</view>
				<view class="list" v-else>
					<view class="name line1">
						{{item.extract_type == 'alipay'?'支付宝':item.extract_type == 'bank'?'银行卡':'微信'}}提现
						<text class="text four" v-if="item.status == 0">待审核</text>
						<text class="text three" v-if="item.status == 1">提现成功</text>
						<text class="text two" v-if="item.status == -1">已驳回</text>
					</view>
					<view class="time">{{getNowDate(item.add_time)}}</view>
					<view class="time" v-if="item.status == -1">
						备注:{{item.mark}}
					</view>
					<view class="value">{{item.extract_price}}</view>
				</view>
			</block>
		</view>
		<view v-else class="list-box" style="text-align: center;padding: 200rpx 0;font-size:30rpx;margin-top:4rpx;color: #999999;">
			暂无数据
		</view>
		<u-popup :show="videoShow" @close="videoShow = false" mode="center" closeOnClickOverlay :safeAreaInsetBottom="false">
		    <view class="video-box">
		    	<video :src="videoInfo.video"></video>
		    </view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getUserMoneyMoney,
		getUserMoneyBalance,
		getUserMoneyExtract,
		getMoneyVideo
	} from '@/api/api.js'
	export default {
		name:'userView',
		data() {
			return {
				statusBarHeight:0,
				userInfo:{},
				tabValue:0,
				bottomMain:false,
				page:1,
				limit:10,
				dataList:[],
				videoShow:false,
				videoInfo:{}
			}
		},
		onShow() {
			this.getUserMoneyMoneyFun();
			this.page = 1;
			this.bottomMain = false;
			this.dataList = [];
			this.getListFun();
			getMoneyVideo().then((res)=>{
				this.videoInfo = res.data
			})
		},
		onReachBottom() {
			if(!this.bottomMain){
				this.page += 1;
				this.getListFun();
			}
		},
		methods: {
			getNowDate(diffValue){
			  if(!diffValue){
				  return '暂无'
			  }
			  var date = new Date(diffValue*1000);
			  var sign2 = ":";
			  var year = date.getFullYear() // 年
			  var month = date.getMonth() + 1; // 月
			  var day = date.getDate(); // 日
			  var hour = date.getHours(); // 时
			  var minutes = date.getMinutes(); // 分
			  var seconds = date.getSeconds() //秒
			  var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
			  var week = weekArr[date.getDay()];
			  // 给一位数的数据前面加 “0”
			  if (month >= 1 && month <= 9) {
			    month = "0" + month;
			  }
			  if (day >= 0 && day <= 9) {
			    day = "0" + day;
			  }
			  if (hour >= 0 && hour <= 9) {
			    hour = "0" + hour;
			  }
			  if (minutes >= 0 && minutes <= 9) {
			    minutes = "0" + minutes;
			  }
			  if (seconds >= 0 && seconds <= 9) {
			    seconds = "0" + seconds;
			  }
			  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
			},
			setTabValue(value){
				this.tabValue = value
				this.page = 1;
				this.bottomMain = false;
				this.dataList = [];
				this.getListFun();
			},
			getUserMoneyMoneyFun(){
				getUserMoneyMoney().then((res)=>{
					this.userInfo = res.data
				})
			},
			async getListFun(){
				let fun = getUserMoneyBalance
				if(this.tabValue == 1){
					fun = getUserMoneyExtract
				}
				const res = await fun({
					page:this.page,
					limit:this.limit
				})
				const data = res.data.list
				if(this.page == 1){
					this.dataList = data
				}else{
					this.dataList.push(...data)
				}
				if(data.length != 10){
					this.bottomMain = true
				}
			},
		}
	
	}
</script>
<style lang="scss" scoped>
	
	.main-box{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		background-color: #F0F4F9;
		.top-box{
			width: 690rpx;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			margin: 30rpx auto;
			overflow: hidden;
			background: linear-gradient(to right,#5C89EE,#3C63FC);
			color: white;
			font-size: 28rpx;
			line-height: 50rpx;
			position: relative;
			box-sizing: border-box;
			.value{
				font-size: 60rpx;
				line-height: 120rpx;
				font-weight: 700;
			}
			.btn{
				background-color: #8FB4FB;
				width: 157rpx;
				line-height: 63rpx;
				border-radius: 32rpx;
				text-align: center;
				position: absolute;
				right: 30rpx;
				top: 70rpx;
			}
			.main-li{
				border-top: solid 1rpx #FFFFFF40;
				overflow: hidden;
				font-size:26rpx;
				padding-top: 20rpx;
				.li{
					width: 33%;
					display: inline-block;
					vertical-align: top;
					box-sizing: border-box;
					.text{
						font-weight: 700;
					}
				}
			}
		}
		.tab-box{
			width: 690rpx;
			overflow: hidden;
			border-radius: 20rpx 20rpx 0 0;
			background-color: white;
			font-size: 32rpx;
			color: #444444;
			line-height: 100rpx;
			position: relative;
			margin: 0 auto;
			.li{
				text-align: center;
				width: 50%;
				display: inline-block;
				vertical-align: top;
				position: relative;
			}
			.main{
				color: #507BF3;
				font-weight: 700;
			}
			.main::after{
				content: '';
				width: 66rpx;
				height: 6rpx;
				position: absolute;
				bottom: 0;
				left: calc(50% - 33rpx);
				background-color: #507BF3;
				z-index: 2;
			}
		}
		.list-box{
			width: 690rpx;
			overflow: hidden;
			border-radius: 0 0 20rpx 20rpx;
			background-color: white;
			font-size: 30rpx;
			color: #444444;
			line-height: 50rpx;
			position: relative;
			margin: 0 auto 50rpx auto;
			.list{
				border-top: solid 2rpx #F0F4F9;
				padding: 20rpx 120rpx 20rpx 20rpx;
				position: relative;
				.name{
					.text{
						color: white;
						border-radius: 10rpx;
						display: inline-block;
						vertical-align: top;
						line-height: 36rpx;
						background-color: #A6A6A6;
						padding: 0 15rpx;
						font-size: 24rpx;
						margin: 8rpx 10rpx 0 10rpx;
					}
					.one{
						background-color: #FF5733;
					}
					.two{
						background: linear-gradient(to right,#EFC7AA,#DA9461);
					}
					.three{
						background-color: #299F8A;
					}
					.four{
						background-color: #3F67FB;
					}
				}
				.time{
					color: #9E9E9E;
					font-size: 26rpx;
				}
				.value{
					position: absolute;
					font-size: 28rpx;
					line-height: 100rpx;
					right: 30rpx;
					top: calc(50% - 50rpx);
					color: #262626;
					font-weight: 700;
				}
			}
			.list.one{
				position: relative;
				padding-left:100rpx;
				.pro-img{
					width:60rpx;
					height:120rpx;
					position: absolute;
					left:20rpx;
					top:calc(50% - 60rpx);
					overflow: hidden;
					image{
						width:100%;
						min-height:100%;
					}
				}
			}
			
		}
	}
	.img-box{
		width: 690rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 30rpx auto;
		position: relative;
		.btn{
			width: 157rpx;
			height: 63rpx;
			position: absolute;
			right: 20rpx;
			bottom: 40rpx;
		}
		image{
			width: 100%;
			height: 100%;
			display: inline-block;
			vertical-align: top;
		}
	}
	.video-box{
		width: 690rpx;
		height: 394rpx;
		overflow: hidden;
		margin: 0 auto;
		video{
			width: 100%;
			height: 100%;
		}
	}
</style>
